<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            overflow: hidden;
        }
    </style>
</head>
<body>
    <!-- 
        浮动的缺陷

        标准流中的元素在不设置高度的情况下都能被内部的标准流元素自动撑高
        如果内部的子元素进行了浮动 是不能撑高标准流父元素

        父元素没有高度 会影响后面元素的标准流位置 
        如果浮动的子元素足够高 可能影响后面浮动元素的贴边

    -->

    <!-- 
        清除浮动带来的影响

        一 给标准流的父元素强制给一个合适的高度
        但是父元素不能够自适应 子元素高度变化还是会有问题

        二 clear 清除标签元素自身受到的前面的浮动元素的影响
        left        right        both
        clear: both;
        但是父元素不能够自适应 两个父元素之间如果有margin  会看不出来

        三 隔墙法
        在两个父元素之间加一个标签来清除 加高度像素隔开
        但是换汤不换药
        div /div

        div clear:both /div

        div /div

        四 内墙法
        将每个父元素最下面添加一个清除的标签 
        但是会多很多冗余 都是没有语义的空标签
        div
        ...
        div clear:both /div
        /div

        div
        ...
        div clear:both /div
        /div
    -->

    <!-- 
        五 伪类

        通过选中的标签添加伪类 去选中标签中的某个状态或者位置
        :after  这个伪类表示选中的是某个标签内部的最后的位置
        前面加普通的选择器 后面连续书写伪类

        .clearfix:after {
            content: "1";
            display: block;
            height: 0;
            clear:both;
            visibility: hidden;
        }

        <div class="box clearfix"> </div>
    -->

    <!-- 
        六 溢出隐藏
        overflow: hidden;

        给内部有浮动子元素的父元素添加溢出隐藏，可以解决浮动的所有问题

        父元素没有设置高度，又添加了溢出隐藏，浏览器会强行去看内部的子元素，选择最高的子元素作为父盒子高度显示
        父盒子有高度后就显示为框住所有的子元素

        如果父元素高度固定 就固定height
        如果父元素不固定 建议使用overflow来解决

    -->




</body>
</html>